<template>
  <main class="w-1500px mx-auto mt-90px mb-20px">
    <div class="p-list mb-20px">
      <div class="perion-title flex items-center wrap mb-20px">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <path
            fill="currentColor"
            d="M22 3H2c-1.09.04-1.96.91-2 2v14c.04 1.09.91 1.96 2 2h20c1.09-.04 1.96-.91 2-2V5a2.074 2.074 0 0 0-2-2m0 16H2V5h20zm-8-2v-1.25c0-1.66-3.34-2.5-5-2.5s-5 .84-5 2.5V17zM9 7a2.5 2.5 0 0 0-2.5 2.5A2.5 2.5 0 0 0 9 12a2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 9 7m5 0v1h6V7zm0 2v1h6V9zm0 2v1h4v-1z"
          />
        </svg>
        <BlurText
          text="个人中心"
          :delay="200"
          class-name="font-semibold text-center text-18px font-bold pl-10px"
          animate-by="words"
          direction="top"
          :threshold="0.1"
          root-margin="0px"
          :step-duration="0.35"
          @animation-complete="handleAnimationComplete"
        />
      </div>
      <div class="persion-list flex justify-between" style="flex-wrap: wrap">
        <FadeContent
          :blur="true"
          :duration="1000"
          :delay="200"
          :threshold="0.1"
          :initial-opacity="0"
          easing="ease-out"
          class-name="my-fade-content"
          v-for="item in $data"
          :key="item.user_id"
          class="mb-40px"
        >
          <GlareHover
            width="369px"
            height="144px"
            background="#ffffff"
            border-color="#222222"
            border-radius="20px"
            glare-color="#000000"
            :glare-opacity="0.3"
            :glare-size="300"
            :transition-duration="800"
            :play-once="false"
            class="persion-content flex"
          >
            <NuxtLink :to="item.url" target="_blank" style="text-decoration: none;">
              <div class="pc p-15px pt-25px">
                <div class="pc-t mb-15px flex justify-between">
                  <div class="pc-t-left flex">
                    <n-image
                      class="w-40px h-40px mr-10px"
                      :src="item.icon"
                    ></n-image>
                    <div class="pc-t-left-r flex flex-col">
                      <span class="text-18px font-bold cursor-target color-black">{{
                        item.name
                      }}</span>
                      <span class="text-11px text-gray-500">{{
                        item.type
                      }}</span>
                    </div>
                  </div>
                  <!-- <div class="pc-t-right">
                    <span class="w-32px h-20px text-11px">置顶</span>
                    <span class="w-32px h-20px text-11px">推荐</span>
                  </div> -->
                </div>
                <div class="pc-b text-12px text-gray-500">
                  {{ item.desc }}
                </div>
              </div>
            </NuxtLink>
          </GlareHover>
        </FadeContent>
      </div>
    </div>
  </main>
</template>

<script setup>
import GlareHover from "@/pages/GlareHover.vue";
import BlurText from "@/pages/BlurText.vue";
import FadeContent from "@/pages/FadeContent.vue";

import { commonApi } from "~/api";

const $data = ref([]);

const $list = async () => {
  const res = await commonApi("/api/list", "get");
  console.log("🚀 ~ list ~ res:", res.data[0].list);
  $data.value = res.data[0].list;
};

onMounted(() => {
  $list();
});
</script>

<style>
.persion-content {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.pc-t-right span {
  border-radius: 5px;
  border: 1px solid #eee;
  padding: 3px 5px;
  font-size: 10px;
  margin: 0 5px;
  background-color: #eee;
}
.pc-t-right span:nth-child(1) {
  color: green;
}
.pc-t-right span:nth-child(2) {
  color: blue;
}
.persion-content {
  border-radius: 20px;
}
</style>